<template>
    <div class="login-container">
        <div class="login-header">
            <div class="title">登录/注册</div>
            <div class="subtitle">首次验证通过即注册账号成功</div>
        </div>

        <div class="login-form">
            <div class="phone-input">
                <van-field v-model="phone" type="tel" maxlength="11" placeholder="请输入手机号" :error="phoneError"
                    @input="validatePhone" clearable />
            </div>

            <div class="submit-btn">
                <van-button block type="primary" :disabled="!canGetCode" @click="handleGetCode">
                    获取验证码
                </van-button>
            </div>
            <div class="agreement">
                <van-checkbox v-model="agreed" icon-size="14px">
                    我已阅读并同意
                    <span class="link" @click.stop="showUserAgreement">《用户协议》</span>
                    和
                    <span class="link" @click.stop="showPrivacyPolicy">《隐私政策》</span>
                </van-checkbox>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, computed } from 'vue'
    import { useUserStore } from '@/store/modules/user'
    import { useRouter } from 'vue-router'
    import { showToast } from 'vant'
    import { userApi } from '@/api/user'

    const router = useRouter()
    const userStore = useUserStore()
    const phone = ref('')
    const agreed = ref(false)
    const phoneError = ref(false)

    // 验证手机号
    const validatePhone = () => {
        const phoneReg = /^1[3-9]\d{9}$/
        phoneError.value = phone.value && !phoneReg.test(phone.value)
    }

    // 是否可以获取验证码
    const canGetCode = computed(() => {
        const phoneReg = /^1[3-9]\d{9}$/
        return phoneReg.test(phone.value)
    })

    // 获取验证码
    const handleGetCode = async () => {
        if (!agreed.value) {
            showToast('请先阅读并同意协议')
            return
        }
        if (!canGetCode.value) return

        router.push({
            name: 'Verify',
            state: {
                params: {
                    phone: phone.value
                }
            },
        })
    }

    // 查看协议
    const showUserAgreement = () => {
        router.push('/agreement/user')
    }

    const showPrivacyPolicy = () => {
        router.push('/agreement/privacy')
    }

</script>

<style lang="scss" scoped>
    .login-container {
        min-height: 100vh;
        background: #fff;
        padding: 40px 20px;
    }

    .login-header {
        margin-bottom: 40px;

        .title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .subtitle {
            font-size: 15px;
            color: #999;
        }
    }

    .login-form {
        .phone-input {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 16px;
            border-bottom: 0.5px solid rgb(229, 230, 235);

            .van-cell {
                padding: 10px 0;
            }

            :deep(.van-field__control) {
                font-size: 24px;
                font-weight: 500;
                color: rgba(29, 33, 41, 1);
                letter-spacing: 0px;
            }
        }

        .agreement {
            font-size: 12px;
            color: #666;

            .link {
                color: rgb(22, 93, 255);
            }
        }

        .submit-btn {
            margin-bottom: 32px;
            margin-bottom: 20px;

            .van-button {
                height: 44px;
                border-radius: 8px;
                font-size: 16px;
                background: rgb(22, 93, 255);
                border: none;

                &--disabled {
                    background: #eee;
                    color: #999;
                }
            }
        }
    }
</style>